<template>
    <div id="salesUpdate">
        <h2>修改销售员</h2>
        <div class="updateSale">
            <el-form ref="updateSale" :model="updateSale" label-width="150px">
                <el-form-item label="销售员账号：">
                    <el-input v-model="updateSale.username"></el-input>
                </el-form-item>
                <el-form-item label="销售员密码：">
                    <el-input v-model="updateSale.password"></el-input>
                </el-form-item>
                <el-form-item label="销售员姓名：">
                    <el-input v-model="updateSale.name"></el-input>
                </el-form-item>
                <el-form-item label="销售员年龄：">
                    <el-input v-model="updateSale.age"></el-input>
                </el-form-item>
                <el-form-item label="销售员性别:">
                    <el-radio-group v-model="updateSale.gender">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="销售员联系方式：">
                    <el-input v-model="updateSale.phone"></el-input>
                </el-form-item>
                <el-form-item label="销售员头像：">
                    <input type="file" @change="updateImages" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="modifySales(updateSale)"
                        >确认修改</el-button
                    >
                </el-form-item>
            </el-form>
            <div class="photo">
                <p>头像区域</p>
                <div class="area" v-if="!updateSale.headSculpture">
                    <img src="http://localhost:3000/images/2.png" alt="" />
                </div>
                <div v-if="updateSale.headSculpture">
                    <img
                        :src="
                            'http://localhost:3000/images/' +
                            updateSale.headSculpture
                        "
                        v-if="show"
                        alt=""
                    />
                    <img
                        :src="
                            'http://localhost:3000/temp/' +
                            updateSale.headSculpture
                        "
                        alt=""
                        v-else
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "../../../http/axios.js";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("salesManage");
export default {
    props: ["_id"],
    data() {
        return {
            show: true,
        };
    },
    computed: {
        ...mapState(["updateSale"]),
    },
    methods: {
        ...mapActions(["modifySales"]),
        async updateImages(event) {
            // 获取图片信息
            const files = event.target.files;
            const formData = new FormData();
            formData.append("file", files[0]);
            const { data } = await axios({
                url: "/images/updateImages",
                method: "post",
                data: formData,
            });
            if (data) {
                this.show = false;
            }
            if (data.code) {
                this.updateSale.headSculpture = data.data;
            }
        },
    },
};
</script>

<style lang="scss">
#salesUpdate {
    padding-left: 20px;
    & > h2 {
        padding-left: 10px;
        margin-bottom: 20px;
        height: 50px;
        line-height: 50px;
        text-align: left;
        border-bottom: 1px solid lightGray;
    }
    .updateSale {
        display: flex;
        .el-form {
            .el-form-item {
                text-align: left;
                .el-input {
                    width: 300px;
                    .el-input__inner {
                        width: 300px;
                    }
                }
            }
        }
        .photo {
            margin-left: 100px;
            margin-top: 60px;
            img {
                width: 200px;
                height: 200px;
            }
            p {
                margin-bottom: 20px;
                color: #606266;
            }
            .area {
                width: 200px;
                height: 200px;
                border: 1px dashed #606266;
                img {
                    width: 200px;
                    height: 200px;
                }
            }
        }
    }
}
</style>